<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>用户登录及注册</title>
<link href="css/stylelogin.css" rel="stylesheet" type="text/css"
	media="all" />
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="User Login Form Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--google fonts-->
<link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet'
	type='text/css'>
<script src="js/jquery.min.js"></script>
</head>
<body>
	<!-- login -->
	<div class="login-section">
		<h1>开始 CDIO</h1>
		<div class="login w3l">
			<div class="modal-content modal-info">
				<div class="modal-header">
					<h2>登 陆</h2>
					<div class="lo-im w3agile">
						<img src="images/john.png" title="john" alt="john" />
					</div>
				</div>
				<div class="modal-body modal-spa">
					<div class="login-form">
						<form action="#" method="post">
							<input type="text" class="user" name="username"
								placeholder="用户名/邮箱/手机" required="" /> <input
								type="password" class="lock" name="password"
								placeholder="密码" required="" />
							<div class="signin-rit">
								<span class="checkbox1"> <label class="checkbox"><input
										type="checkbox" name="checkbox" checked="">记住密码</label>
								</span> <a class="forgot" href="#">忘记密码?</a>
								<div class="clear"></div>
							</div>
							<input type="submit" value="登陆">
						</form>

						<!-- 			<div class="social-icons agile">
					<ul>
						<li><a href="#" class="facebook"><img src="images/fb.png" title="facebook" alt="facebook" /></a></li>
						<li><a href="#" class="twitter"><img src="images/tw.png" title="twitter" alt="twitter" /></a></li>
						<li><a href="#" class="googleplus"><img src="images/gp.png" title="googleplus" alt="googleplus" /></a></li>
					</ul>	
				</div> -->
					</div>
				</div>
			</div>
			<!-- //login -->
			<div class="clear"></div>
		</div>
		<div class="signup">
			<div class="modal-content modal-info">
				<div class="modal-header">
					<h3>注 册</h3>
				</div>
				<div class="modal-body modal-spa">
					<div class="login-form">
						<form action="#" method="post" id="signup">
							<ol>
								<li><input type="text" id="name" name="name"
									placeholder="用户名" title="Name" required /></li>

								<li><input type="email" id="email" name="email"
									placeholder="邮箱"
									title="Please enter a valid email" required />
									<p class="validation01">
										<span class="invalid">Please enter a valid email
											address e.g. <a class="__cf_email__"
											href="/cdn-cgi/l/email-protection"
											data-cfemail="17656e767957726f767a677b723974787a">[email&#160;protected]</a>
											<script data-cfhash='f9e31' type="text/javascript">
												/* <![CDATA[ */!function(t, e,
														r, n, c, a, p) {
													try {
														t = document.currentScript
																|| function() {
																	for (
																			t = document
																					.getElementsByTagName('script'),
																			e = t.length; e--;)
																		if (t[e]
																				.getAttribute('data-cfhash'))
																			return t[e]
																}();
														if (t
																&& (c = t.previousSibling)) {
															p = t.parentNode;
															if (a = c
																	.getAttribute('data-cfemail')) {
																for (
																		e = '',
																		r = '0x'
																				+ a
																						.substr(
																								0,
																								2)
																				| 0,
																		n = 2; a.length
																		- n; n += 2)
																	e += '%'
																			+ ('0' + ('0x'
																					+ a
																							.substr(
																									n,
																									2) ^ r)
																					.toString(16))
																					.slice(-2);
																p
																		.replaceChild(
																				document
																						.createTextNode(decodeURIComponent(e)),
																				c)
															}
															p.removeChild(t)
														}
													} catch (u) {
													}
												}()/* ]]> */
											</script>
										</span> <span class="valid">Thank you for entering a valid
											email</span>
									</p></li>
								<li><input type="tel" id="tel" name="tel" pattern="\d{10}"
									placeholder="手机号" required />
									<p class="validation01">
										<span class="invalid">No spaces or brackets e.g.
											0534907286</span> <span class="valid">That's what we wanted!</span>
									</p></li>
								<li><input type="password" class="lock" name="password"
									title="Minimum 8 characters, one number, one uppercase and one lowercase letter"
									pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*"
									placeholder="密码" id="password1" required />
									<p class="validation01">
										<span class="invalid">Minimum 8 characters, one number,
											one uppercase letter and one lowercase letter</span> <span
											class="valid">Your password meets our requirements,
											thank you.</span>
									</p></li>
								<!-- 	<li>
							<input type="password" class="lock" name="password" title="Minimum 8 characters, one number, one uppercase and one lowercase letter" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" placeholder="Confirm Password" id="password2" required />
							<p class="validation01">
								<span class="invalid">Minimum 8 characters, one number, one uppercase letter and one lowercase letter</span>
								<span class="valid">Your password meets our requirements, thank you.</span>
							</p>
						</li> -->
							</ol>
							<div class="signin-rit">
								<span class="checkbox1"> <label class="checkbox"><input
										type="checkbox" name="checkbox" checked="">同意接受
										<a class="pp" href="#"> CDIO用户协议</a> 和<a class="pp" href="#">
											网络购物安全协议</a></label>
								</span>
								<div class="clear"></div>
							</div>
							<input type="submit" value="注册">
						</form>
						<!-- script for password confirmation -->
						<script type="text/javascript">
							window.onload = function() {
								document.getElementById("password1").onchange = validatePassword;
								document.getElementById("password2").onchange = validatePassword;
							}
							function validatePassword() {
								var pass2 = document
										.getElementById("password2").value;
								var pass1 = document
										.getElementById("password1").value;
								if (pass1 != pass2)
									document.getElementById("password2")
											.setCustomValidity(
													"Passwords Don't Match");
								else
									document.getElementById("password2")
											.setCustomValidity('');
								//empty string means no validation error
							}
						</script>
						<!-- //script for password confirmation -->

					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<p class="footer">
			© 2016 User Login Form Widget. All Rights Reserved | Design by <a
				href="http://w3layouts.com/"> dglq_CDIO</a>
		</p>
	</div>

</body>
</html>